<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deferred</title>
</head>
<body>
    <script src="../../assets/libs/jquery-2.0.3.js"></script>
    <script>
        // 示例一
        function task(name) {
            var dfd = $.Deferred()
            setTimeout(function () {
                dfd.resolve(name)
            }, 2000);
            return dfd;
        }
        $.when(task('任务一'), task('任务二')).done(function() {
            console.log('成功')
        }).fail(function() {
            console.log('error')
        })


        // 示例二
        var filterResolve = function() {
            var defer = $.Deferred();
            //先执行成功
            defer.resolve(5);
            //后添加
            defer.done(function(value) {
                $('body').append("<li>defer.done的值是：" + value + "</li>");
                console.log('defer.done的值是：:>> ', value);
            })
            //实现一个管道方法
            var filtered = defer.then(function(value) {
                return value * 2;
            });
            //接受上一个值，叠加处理
            filtered.done(function(value) {
                $('body').append("<li>filtered.done ( 2*5 = ) 10: " + value +"</li>");
                console.log('filtered.done ( 2*5 = ) 10:  :>> ', value);
            });
        };
        filterResolve()


    </script>
</body>
</html>